import { subLevel } from '@/services/dict/DictController';
import {ModalForm, ProFormSelect, ProFormText} from '@ant-design/pro-components';
import { message } from 'antd';
import { useEffect, useState } from 'react';


export interface FormValueType extends Partial<API.JobAndTriggerBO> {
    target?: string;
    template?: string;
    type?: string;
    time?: string;
    frequency?: string;
}


export interface ResetFormProps {
    onOpenChange: (flag?: boolean, formVals?: FormValueType) => void;
    onSubmit: (values: FormValueType) => Promise<void>;
    resetModalVisible: boolean;
    values: Partial<API.JobAndTriggerBO>;
}

const cronOptionsDefault = [
    { label: '每2秒', value: '0/2 * * * * ?' },
    { label: '每2分钟', value: '0 0/2 * * * ?' },
    { label: '每分钟', value: '0 * * * * ?' },
];

export default (props: ResetFormProps) => {
    const [cronOptions, setCronOptions] = useState<{ label: string; value: string; }[]>(cronOptionsDefault);
    // 获取cron表达式
    const findCrons = async () => {
        try {
            // 固定值
            const { data } = await subLevel("101");
            console.log(data, 'data');
            if (data && data.length > 0) {
                const formattedData = data.map(item => ({
                    label: item.name,
                    value: item.val,
                }));
                setCronOptions(formattedData);
            }
        } catch (error) {
            message.error('获取cron表达式数据失败');
        }
    };
    useEffect(() => {
        findCrons();
      }, []);

    return (
        <ModalForm
            title="重置任务Cron"
            open={props.resetModalVisible}
            onOpenChange={props.onOpenChange}
            onFinish={props.onSubmit}
            initialValues={props.values}
        >
            <ProFormText
                width="md"
                name="jobName"
                label="任务名"
                disabled={true}
                rules={[
                    {required: true, message: '请输入任务名'},
                ]}
            />
            <ProFormSelect
                name="cronExpression"
                width="md"
                label="cron表达式"
                tooltip='
                            表达式参考：https://www.bejson.com/othertools/cron/ 。
                            如果下拉列表没有请自定义 cron表达式
                        '
                rules={[
                    {required: true, message: '请输入或选择cron表达式'},
                ]}
                options={cronOptions}
                fieldProps={{
                    showSearch: true,
                    allowClear: true,
                    filterOption: (input: string, option: any) =>
                        (option?.label as string ?? '').toLowerCase().includes(input.toLowerCase()),
                    showArrow: false,
                }}
            />
        </ModalForm>
    );
};
